<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户信息</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/layuimini.css" media="all">
</head>
<body>
<div>
	<div>
		<!-- 查询条件开始 -->
		<fieldset class="table-search-fieldset">
			<legend>搜索信息</legend>
			<div style="margin: 10px 10px 10px 10px">
				<form class="layui-form layui-form-pane" action="">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">姓名</label>
							<div class="layui-input-inline">
								<input type="text" name="realName" placeholder="请输入姓名" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">院系</label>
							<div class="layui-input-inline">
								<select >
									<option value="1" selected>计算机科学与技术学院</option>
									<option value="2">电子信息工程学院</option>
									<option value="3">机械电子工程学院</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">专业</label>
							<div class="layui-input-inline">
								<select >
									<option value="1" selected>计算机科学与技术</option>
									<option value="2">软件工程</option>
									<option value="3">网络工程</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">班级</label>
							<div class="layui-input-inline">
								<input type="text" name="classname" placeholder="请输入班级" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">年级</label>
							<div class="layui-input-inline">
								<input id="year" type="text" name="grade" placeholder="请选择入学年份" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
						</div>
					</div>
				</form>
			</div>
		</fieldset> 	<!-- 查询条件结束 -->

        <!-- 工具栏设置： 添加用户、批量删除，这里id的值由程序员自定-->
		<script type="text/html" id="studentTableToolbar">
			<div class="layui-btn-container">
				<!-- 这里的lay-event="add"和delete在后面的JS代码中要用 -->
				<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加用户 </button>
				<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 批量删除 </button>
			</div>
		</script> <!--工具栏设置结束-->

       <!-- 数据表格定义，先隐藏起来，内容由后面的JS代码动态产生；lay-filter="studentTableFilter"在后面的JS代码里用 -->
		<table class="layui-hide" id="studentTable" lay-filter="studentTableFilter"></table>

		<!--用户状态列（看表格预览效果），id="userStatus"是程序员自定，后面JS中用-->
		<script type="text/html" id="userStatus">
			<input type="checkbox" name="status"  checked lay-skin="switch" lay-text="启用|禁用" lay-event="open" lay-filter="modifystatus" {{ d.status == '1'? 'checked' : '' }}/>
		</script>

        <!-- 定义表格最后一列：操作 ；lay-event="detail"、 lay-event="edit"、lay-event="delete"后面JS会用到-->
		<script type="text/html" id="studentTableOperation">
			<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="detail">查看详情</a>
			<a class="layui-btn  layui-btn-xs data-count-edit" lay-event="edit">修改</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
		</script>
	</div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
	// 使用Layui的表单和表格模块
	layui.use(['form', 'table'], function () {
		var $ = layui.jquery;     // 获得jQuery
			form = layui.form;    // 获得表单模块
			table = layui.table;  // 获得表格模块
			
        //渲染表格，也就是设置表格
		table.render({
			elem: '#studentTable', // 上面表格的id
			url: 'user.json', // 表格数据JSON文件的位置
			toolbar: '#studentTableToolbar', // 工具栏的id，上面定义的 ；不写的话工具栏不会出现
			defaultToolbar: ['filter', 'exports', 'print', {
				title: '提示',
				layEvent: 'LAYTABLE_TIPS',
				icon: 'layui-icon-tips'
			}],
			cols: [[ // 列定义
				{type: "checkbox", width: 50},
				{field: 'id', width: 80, title: 'ID', sort: true},
				{field: 'realname', width: 80, title: '姓名'},
				{field: 'university', width: 180, title: '学校'},
				{field: 'majorname', width:160, title: '专业'},
				{field: 'background', title: '学历', width: 100},
				{field: 'grade', width: 100, title: '年级', sort: true},
				{field: 'telephone', width: 120, title: '手机号码'},
				{
					field : 'status',
					width:150,
					title : '用户状态',
					templet : '#userStatus', // 上面用户状态列定义的id：userStatus
					unresize : true,
					align: "center"
				},
				{title: '操作', minWidth: 130, toolbar: '#studentTableOperation', align: "center"}
			]],
			limits: [10, 15, 20, 25, 50, 100], // 每页显示条数切换
			limit: 15, // 每页默认显示15条数据
			page: true, // 不写的话，分页显示不会显示
			skin: 'line' // 表格有边框
		});

		// 监听搜索操作
		form.on('submit(data-search-btn)', function (data) {
			var result = JSON.stringify(data.field);
			layer.alert(result, {
				title: '最终的搜索信息'
			});

			//执行搜索重载
			table.reload('studentTable', {
				page: {
					curr: 1
				}
				, where: {
					searchParams: result
				}
			}, 'data');

			return false;
		});

		form.on('switch(modifystatus)', function(obj){
			console.log(obj);
			var param = obj.value;
		});

		/**
		 * toolbar监听事件（工具栏监听事件），就是：添加用户和批量删除
		 */
		table.on('toolbar(studentTableFilter)', function (obj) {
		    if (obj.event === 'add') {  // 监听添加操作，工具栏上的添加用户， lay-event="add"
				var index = layer.open({
					title: '添加用户',
					type: 2,
					shade: 0.2,
					maxmin:true,
					shadeClose: true,
					area: ['100%', '100%'],
					content: './user/addUser.html',
				});
				$(window).on("resize", function () {
					layer.full(index);
				});
			} else if (obj.event === 'delete') {  // 监听批量删除操作
				var checkStatus = table.checkStatus('studentTable')
						, data = checkStatus.data;
				layer.alert(JSON.stringify(data));
			}
		});

		//监听表格复选框选择
		table.on('checkbox(studentTableFilter)', function (obj) {
			console.log(obj); // 这里是简单的将信息输出，可看浏览器控制台
		});
         
		// 监听表格最后一列的操作：也就是最后一列的3个按钮：查看详情、修改和删除
		table.on('tool(studentTableFilter)', function (obj) {
			var data = obj.data;
			if(obj.event === 'detail'){
				//layer.alert("查看详情");
				var index = layer.open({
					title: '查看详情',
					type: 2,
					shade: 0.2,
					maxmin:true,
					shadeClose: true,
					area: ['100%', '100%'],
					content: './user/userDetail.html',
				});
				$(window).on("resize", function () {
					layer.full(index);
				});
				return false;
			} else if (obj.event === 'edit') {
				var index = layer.open({
					title: '编辑用户',
					type: 2,
					shade: 0.2,
					maxmin:true,
					shadeClose: true,
					area: ['100%', '100%'],
					content: './user/editUser.html',
				});
				$(window).on("resize", function () {
					layer.full(index);
				});
				return false;
			} else if (obj.event === 'delete') {
				layer.confirm('您确认删除吗？', {icon:3}, function (index) {
					obj.del();
					layer.close(index);
				});
			}
		});

	});

	layui.use('laydate', function(){
		var laydate = layui.laydate;
		var initYear;
		laydate.render({
			elem: '#year', //开发中把这里的year换成自己的， 日期文本框的id
			type: 'year', // 只显示年
			/* ready和change函数是为了实现选择年份时不用点确定直接关闭  */
			ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象
				initYear = date.year;
			},
			change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
				var selectYear = date.year;
				var differ = selectYear-initYear;
				if (differ != 15 && differ != -15) {
					if($(".layui-laydate").length){
						$("#year").val(value);
						$(".layui-laydate").remove();
					}
				}
				initYear = selectYear;
			}
		});
	});

</script>

</body>
</html>